<template>
  <el-dialog width="50%"
             :close-on-click-modal="false"
             :model-value="['detail'].includes(baTable.form.operate!)"
             @close="baTable.toggleForm"
             :destroy-on-close="true"
             title="详情">
    <el-scrollbar v-loading="baTable.form.loading"
                  class="ba-table-form-scrollbar">
      <el-table border
                :data="tableData"
                stripe
                :header-cell-style="{color: '#000'}"
                max-height="450">
        <el-table-column prop="sku"
                         label="sku"></el-table-column>
        <el-table-column prop="seller_sku"
                         label="seller_sku"></el-table-column>
        <el-table-column prop="seller_sku_id"
                         label="seller_sku_id"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNum"
                     :page-sizes="pageSizes"
                     :page-size="pageSize"
                     background
                     :total="pageTotal"
                     layout="sizes, total, ->, prev, pager, next, jumper"></el-pagination>
    </el-scrollbar>
    <template #footer>
      <div>
        <el-button v-blur
                   @click="baTable.toggleForm('')"
                   type="primary">
          {{ t('Close') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type baTableClass from '/@/utils/baTable'
import { useI18n } from 'vue-i18n'
import { ref, inject, watch } from 'vue'
import { getProductInfo } from '/@/api/backend/product/product'
const { t } = useI18n()
const baTable = inject('baTable') as baTableClass
const pageNum = ref(1)
const pageSize = ref(10)
const pageSizes = [10, 20, 30, 50, 100, 200, 250, 300, 500]
const pageTotal = ref(0)
const tableData = ref([] as any[])
const props = defineProps({
    rowData: {
        required: true,
        type: Object,
        default: () => { return {} }
    }
})
const handleSizeChange = (val:number) => {
    pageNum.value = 1
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val:number) =>  {
    pageNum.value = val
    getTableData()
}
const getTableData = () => {
    baTable.form.loading = true
    getProductInfo({ product_id: props.rowData.product_id, page: pageNum.value, limit: pageSize.value }).then(res => {
        if(res.data && res.data.list.length) {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        } else {
            tableData.value = []
            pageTotal.value = 0
        }
        baTable.form.loading = false
    })
}

watch(
    () => baTable.form.operate,
    (newVal) => {
        if(newVal == 'detail') getTableData()
    }
)


</script>

<style scoped lang="scss">
:deep(.el-table + .el-pagination){
    margin-top: 15px;
}
</style>